<div class="tab-pane" ng-init="$ctrl.loadMedias()">
    <div class="row">
        <div class="col-12">
            <h6>Selected items</h6>            
            <navs data="$ctrl.data" prefix="$ctrl.prefix"></navs>
        </div>
    </div>
    <!--activeMedias-->
    <div class="row">
        <div class="col-12">
            <media-upload on-update="$ctrl.loadMedias()"></media-upload>
        </div>

    </div>
    <hr>
    <div class="row mb-3">
        <!-- <div class="col-12">
            <h3>Medias</h3>
        </div> -->
        <div class="col-md-8">
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">

            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <div class="input-group-text" id="btnGroupAddon">
                        <i class="mi mi-Search btn-search-media" ng-click="$ctrl.loadMedias()" style="top:0;cursor:pointer;"></i>
                    </div>
                </div>
                <input type="text" ng-model="$ctrl.request.keyword" ng-enter="$ctrl.loadMedias()" class="form-control media-keyword"
                    placeholder="Search media items..." aria-label="Search media items..." aria-describedby="btnGroupAddon">
            </div>
        </div>
    </div>
    <div class="card-columns" style="column-count: 3 !important;column-gap: 0.75rem;">
        <div class="card" ng-repeat="media in $ctrl.medias.items" ng-hide="media.isHidden">
            <span class="switch switch-sm position-absolute m-1">
                <input type="checkbox" class="switch" ng-model="media.isActived" ng-change="$ctrl.activeMedia(media)"
                    id="{{$ctrl.prefix}}_Media_Image_{{media.id}}" value="true">
                <label class="switch m-0" for="{{$ctrl.prefix}}_Media_Image_{{media.id}}">
                </label>
            </span>
            <div class="btn-group btn-group-sm position-absolute m-1" role="group" aria-label="Basic example" style="z-index:3; right:0;">
                <!--<button class="btn btn-light custom-file-cropper" data-toggle="modal" data-target=".image-crop-modal-lg" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}">
                    <i class="mi mi-Crop"></i>
                </button>
                <button class="btn btn-light btn-sm" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}" ng-click="removeMedia(media.id)">
                    <i class="mi mi-Delete"></i>
                </button>
                -->
            </div>
            <a href="#" data-toggle="modal" data-target=".image-preview-modal-lg" data-imgsrc="{{media.fullPath}}">
                <img class="card-img-top" ng-src="{{media.fullPath}}" alt="{{media.title}}">
            </a>
        </div>
    </div>
    <nav aria-label="Page navigation" ng-if="$ctrl.medias.totalPage>0">
        <ul class="pagination pagination-sm pull-right">
            <li class="page-item">
                <a class="page-link active" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex-1)"
                    ng-hide="$ctrl.medias.pageIndex==0">Prev</a>
            </li>
            <li class="page-item" ng-class="{active: n-1==$ctrl.medias.pageIndex}" ng-repeat="n in range($ctrl.medias.totalPage)"><a
                    class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias(n-1)">{{n}}</a></li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex + 1)"
                    ng-hide="$ctrl.medias.pageIndex >= ($ctrl.medias.totalPage-1)">Next</a>
            </li>
        </ul>
    </nav>
</div>
